<template>
	<view class="page">
		<view class="canvas_wrap" v-if="empClass == 0">
			<image src="/static/public/register.png" class="bg" mode="aspectFit"></image>
			<view class="con">
				<view class="codeImg">
					<image :src="url" class="code"></image>
				</view>
				<view class="text">分享专属二维码，享受推荐奖</view>
				<view class="btn">
					<button class="btnText" @click="saveImageToPhotosAlbum">保存图片到相册</button>
				</view>
			</view>
			<canvas canvas-id='myCanvas' class="share" />
		</view>
		<view class="hhr" v-if="empClass == 1">
			<!-- 背景图片 -->
			<image class="hhrImg" src="/static/public/hhrbjt.png"></image>
			<!-- 状态 -->
			<view class="hhrTitle">
				<view class="hhtText hhrdl" v-if="showStatus == 3 && indexData.qualifications == false">您当前还不是合伙人</view>
				<view class="hhtText hhrjjr" v-if="showStatus == 2">您已加入{{name}}的合伙人团队</view>
				<view class="hhtText hhrky" v-if="showStatus == 3 && indexData.qualifications == true">您可以申请为合伙人</view>
				<picker mode="date" fields="month" @change="getDateTime" v-if="showStatus == 1">
					<view class="selectDate">
						<view class="hhtText hhrsq">{{time}}</view>
					</view>
				</picker>
			</view>
			<!-- 成为合伙人条件 -->
			<view class="conditions" v-if="showStatus == 3">
				<view class="condTitle">成为合伙人的条件：</view>
				<view class="condCenter">
					<view class="left">1、个人月进件额达到100万及以上</view>
					<view class="right" v-if="indexData.qualifications == false">未达成</view>
					<view class="right ydc" v-if="indexData.qualifications == true">已达成</view>
					<view class="right" v-if="!indexData">未达成</view>
				</view>
				<view class="condCenter">
					<view class="left">2、邀请至少1名经纪人加入团队</view>
					<view class="right">未达成</view>
				</view>
			</view>
			<!-- 详情 -->
			<view class="xiangqing" v-if="indexData">
				<view class="header">
					<view class="heaLeft">
						<view class="heaTit" v-if="showStatus != 3 && indexData.qualifications == true">￥{{indexData.monthlyIncome||0}}</view>
						<view class="heaTit" v-if="showStatus == 3 && indexData.qualifications == false">￥1000000</view>
						<view class="heaTit" v-if="showStatus == 3 && indexData.qualifications == true">￥{{indexData.monthlyIncome||0}}</view>
						<view class="heaTit" v-if="!indexData">￥0</view>
						<view class="heaText" v-if="showStatus == 3 && indexData.qualifications == false">总放款额示例</view>
						<view class="heaText" wx:else>本月总放款额</view>
					</view>
					<view class="heaLeft heaRight">
						<view class="heaTit" v-if="indexData && indexData.qualifications == true">￥{{indexData.monthlyBonus || 0}}</view>
						<view class="heaTit" v-if="showStatus == 3 && indexData.qualifications == false">￥6000</view>
						<view class="heaTit" v-if="!indexData">￥0</view>
						<view class="heaText" v-if="showStatus == 1">本月奖金</view>
						<view class="heaText" v-if="showStatus == 2">经纪人奖金预估</view>
						<view class="heaText" v-if="showStatus == 3 && indexData.qualifications == false">奖金示例</view>
						<view class="heaText" v-if="showStatus == 3 && indexData.qualifications == true">奖金预估</view>
					</view>
				</view>
				<view class="heatishi" v-if="showStatus != 2">其中合伙人奖金20%，经纪人奖金80%</view>
				<!-- 表格 -->
				<view class="table" v-if="showStatus != 2">
					<view class="table-tr">
						<view class="table-th">实际放款额</view>
						<view class="table-th">奖励比例</view>
						<view class="table-th">当前奖金</view>
					</view>
					<view class="table-tr">
						<view class="table-td">1-30万（不含）</view>
						<view class="table-td">0.5%</view>
						<view class="table-td" v-if="indexData.bonusScale.sectionStatus == 1">{{indexData.bonusScale.bonusAmount}}</view>
						<view class="table-td" v-if="indexData.bonusScale.sectionStatus != 1">0</view>
					</view>
					<view class="table-tr">
						<view class="table-td">30-150万（不含）</view>
						<view class="table-td">0.6%</view>
						<view class="table-td" v-if="indexData.bonusScale.sectionStatus == 2 && showStatus != 3">{{indexData.bonusScale.bonusAmount}}</view>
						<view class="table-td" v-if="indexData.bonusScale.sectionStatus != 2 && showStatus != 3 && indexData.qualifications == false">0</view>
						<view class="table-td" v-if="showStatus == 3 && indexData.qualifications == false">6000</view>
						<view class="table-td" v-if="showStatus == 3 && !indexData">0</view>
						<view class="table-td" v-if="indexData.bonusScale.sectionStatus && indexData.bonusScale.sectionStatus != 2">0</view>
					</view>
					<view class="table-tr">
						<view class="table-td">150-300万（不含）</view>
						<view class="table-td">0.8%</view>
						<view class="table-td" v-if="indexData.bonusScale.sectionStatus == 3">{{indexData.bonusScale.bonusAmount}}</view>
						<view class="table-td" v-if="indexData.bonusScale.sectionStatus != 3">0</view>
					</view>
					<view class="table-tr">
						<view class="table-td">300万以上（不含）</view>
						<view class="table-td">1%</view>
						<view class="table-td" v-if="indexData.bonusScale.sectionStatus == 4">{{indexData.bonusScale.bonusAmount}}</view>
						<view class="table-td" v-if="indexData.bonusScale.sectionStatus != 4">0</view>
					</view>
				</view>
				<view class="table" v-if="showStatus == 2">
					<view class="table-tr">
						<view class="table-th">我的放款额</view>
						<view class="table-th">放款额占比</view>
						<view class="table-th">本月奖金预估</view>
					</view>
					<view class="table-tr">
						<view class="table-td">{{agentBonusAmount.paymentAmount}}</view>
						<view class="table-td">{{agentBonusAmount.paymentScale * 100}}％</view>
						<view class="table-td">{{agentBonusAmount.bonusAmount}}</view>
					</view>
				</view>
				<!-- 按钮 -->
				<view class="xqBtn" v-if="showStatus == 3 && indexData.qualifications == false">
					<view class="xqText">您暂未获得邀请资格</view>
				</view>
			</view>

			<!-- 规则 -->
			<view class="rules" v-if="showStatus == 1">
				<view class="rulesTit">合伙人规则：</view>
				<view class="rulesText">1、合伙人机制是贷投狗以激励合伙人及其团队，平台建立的一个额外奖励制度，
					按团队月总进件额按照梯度比例计算并归入当月奖金池，分配规则为合伙人20％，经纪人80％，合伙人部分独得，经纪人部分按进件额比例分配；</view>
				<view class="rulesText">2、团队经纪人连续3月达成100万进件额可申请独立合伙人；</view>
			</view>
			<view class="rules" v-if="showStatus == 3 || showStatus == 2">
				<view class="rulesTit">团队经纪人规则：</view>
				<view class="rulesText">1、团队奖金是平台设立的对加入团队的经纪人的额外奖励制度，
					按团队月总进件额按照梯度比例计算并归入当月奖金池；</view>
				<view class="rulesText">2、经纪人按当月放款额比例分配奖金的80％。
					经纪人连续3月达成100万进件额可申请成为合伙人；</view>
			</view>

			<!-- 您的团队剩余名额 -->
			<view class="xiangqing" v-if="showStatus == 1">
				<view class="places">
					<view class="placesLeft">您的团队剩余名额</view>
					<view class="placesRight" v-if="indexData">{{indexData.teamNum || 0}}/{{indexData.teamSize || 0}}</view>
					<view class="placesRight" v-if="!indexData">0/0</view>
				</view>
				<view class="table">
					<view class="table-tr">
						<view class="table-th">等级</view>
						<view class="table-th">标准</view>
						<view class="table-th">规模</view>
					</view>
					<view class="table-tr">
						<view class="table-td"> 一级合伙人 </view>
						<view class="table-td"> 年放款{{'<'}}100万</view>
						<view class="table-td">10人</view>
					</view>
					<view class="table-tr">
						<view class="table-td">二级合伙人</view>
						<view class="table-td">100万{{'=<'}}年放款{{'<'}}300万</view>
						<view class="table-td">20人</view>
					</view>
					<view class="table-tr">
						<view class="table-td">三级合伙人</view>
						<view class="table-td">300万{{'=<'}}年放款</view>
						<view class="table-td">50人</view>
					</view>
				</view>
			</view>

			<!-- 团队成员 -->
			<view v-if="showStatus == 1" class="user">
				<view class="userTit">{{teamAchievementTitle}}</view>
				<view class="usercontent" v-if="showStatus == 2" v-for="item in teamAchievement" :key="item.id">
					<view class="userLeft">
						<view class="userName">{{item.name}}</view>
						<view style="font-size: 12px; color: #999999;">进件{{item.orderNum}}个，放款{{item.loanAmount / 10000}}万元</view>
					</view>
					<view class="userRight">
						<view class="dengji" v-if="item.partnerType == 1">一级合伙人</view>
						<view class="dengjijjr" v-if="item.partnerType != 1">经纪人</view>
						<view style="font-size: 12px; color:#333333;text-align:center">奖金<text style="color:#FF3347">{{item.bonusAmount}}</text></view>
					</view>
				</view>
				<!-- 左滑删除 -->
				<view v-if="showStatus == 1">
					<uni-swipe-action>
						<uni-swipe-action-item class="order-item " v-for="(item,index) in data" :right-options="options" :key="item.id"
						 @click="swipeClick($event, item.id, index, item.name)" :disabled="item.partnerType == 1">
							<view class="usercontentremove">
								<view class="userLeft">
									<text class="userName">{{item.name || item.phoneNumber}}</text>
									<text class="applyPartner" v-if="item.applyPartnerStatus == 1">申请退出</text>
									<text class="applyPartner" v-if="item.idStatus == 2">待审状态</text>
									<view style="font-size: 12px; color: #999999;">进件{{item.orderNum}}个，放款{{item.loanAmount / 10000}}万元</view>
								</view>
								<view class="userRight">
									<view class="dengji" v-if="item.partnerType == 1">一级合伙人</view>
									<view class="dengjijjr" v-if="item.partnerType != 1">经纪人</view>
									<view style="font-size: 12px; color:#333333;text-align:center">奖金<text style="color:#FF3347">{{item.bonusAmount}}</text></view>
								</view>
							</view>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</view>


			</view>

			<!-- 按钮 -->
			<view class="buttonn">
				<view class="buttonText" v-if="showStatus == 1" @click="goToInvite">邀请经纪人加入</view>
			</view>
			<!--<view class="buttonn" v-if="showStatus == 3 || showStatus == 1">
				<button class="buttonText buttonstyle" open-type="contact">联系管家获取</button>
			</view> -->
			<view class="buttonn" bindtap="jjrewm">
				<view class="buttonText" v-if="showStatus == 3 && indexData.qualifications == true">邀请经纪人后自动开通</view>
			</view>
			<view class="buttonn" v-if="showStatus == 2">
				<button class="buttonText" @click="updatePar" :disabled="updateParDis">升级为合伙人</button>
			</view>
			<view style="width:100%;height:100rpx"></view>

			<!--弹出框 查看经纪人信息-->
			<view class="addtellBox" v-if="showPop">
				<view class="addtellMian">
					<view class="tellsection" style="line-height:55rpx">
						<view class="addtellContent">姓名：{{addtellData.agentName}}</view>
						<view class="addtellContent" @click="makePhoneCall(addtellData.phoneNumber)">手机号：{{addtellData.phoneNumber}}</view>
					</view>
					<view class="guanbiImg">
						<uni-icons type="close" size="30" color="white" @click="closePop"></uni-icons>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				updateParDis: false,
				height: "",
				url: "",
				empClass: null,
				showStatus: 1,
				indexData: "",
				time: "",
				teamAchievement: null,
				teamAchievementTitle: "",
				delBtnWidth: 160,
				isScroll: true,
				windowHeight: 0,
				data: [],
				newData: [],
				addtellData: {
					agentName: null,
					phoneNumber: null,
				},
				showPop: false,
				agentBonusAmount: {},
				name: "",
				options: [{
					id: '0',
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}, {
					id: '1',
					text: '查看',
					style: {
						backgroundColor: '#007aff'
					}
				}]
			}
		},
		computed: {
			...mapState(["userInfo"]),
		},
		onLoad: function(options) {
			let timestamp = Date.parse(new Date());
			let date = new Date(timestamp);
			//获取年份  
			let Y = date.getFullYear();
			//获取月份  
			let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
			var time = Y + "-" + M
			this.time = time;
			this.empClass = this.userInfo.empClass;
		},
		onShow() {
			this.status();
		},
		methods: {
			//升级合伙人
			updatePar(el) {
				this.$noMoreClick.canDoFunction({
					key: "updatePar", //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 3000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => {
						this.updateParDis = true;
						setTimeout(() => {
							this.updateParDis = false;
						}, 3000);
						this.updateParFun();
					}
				})
			},
			//升级合伙人事件
			updateParFun() {
				this.$api.updatePar().then(res => {
					let resData = res.data.data;
					console.log(resData)
					if (resData) {
						uni.showModal({
							title: '提示',
							content: '您已成功获取申请合伙人资格，是否申请',
							showCancel: true, //是否显示取消按钮
							cancelText: "取消", //默认是“取消”
							confirmText: "确定",
							success: function(res) {
								if (res.cancel) {} else {
									//点击确定
									this.$api.putParInfo().then(resIn=>{
										let resInfo = resIn.data.data;
										if (resInfo.code == 200) {
											uni.showModal({
												title: '提示',
												content: resInfo.message,
												showCancel: false, //是否显示取消按钮
												confirmText: "确定",
											})
										} else {
											uni.showModal({
												title: '提示',
												content: resInfo.message,
												showCancel: false, //是否显示取消按钮
												confirmText: "确定",
											})
										}
									})
								}
							},
							
						})
					} else {
						uni.showModal({
							title: '提示',
							content: '暂无申请资格',
							showCancel: false, //是否显示取消按钮
							confirmText: "确定",
						})
					}
				})
			},
			//跳转邀请界面
			goToInvite() {
				uni.navigateTo({
					url: "/pages/partner/invite"
				})
			},
			//保存二维码到相册
			saveImageToPhotosAlbum() {
				uni.showToast({
					title: '图片保存中',
					icon: 'none'
				})
				const ctx = uni.createCanvasContext('myCanvas')
				uni.getImageInfo({
					src: this.url,
					success(res) {
						ctx.drawImage("/static/public/canvas.png", 0, 0, uni.getSystemInfoSync().windowWidth, 667)
						ctx.drawImage(res.path, (uni.getSystemInfoSync().windowWidth - 220) / 2, 320, 220, 220)
						ctx.draw(true, setTimeout(function() {
							uni.canvasToTempFilePath({
								canvasId: 'myCanvas',
								success: (res) => {
									console.log(res);
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: () => {
											uni.showToast({
												title: '保存成功',
												icon: 'none'
											})
										},
										fail: () => {
											console.log(2222)
											uni.showToast({
												title: '保存失败',
												icon: 'none'
											})
										}
									})
								}
							})
						}, 100))
					},
					fail() {
						uni.showToast({
							title: '图片加载失败',
							icon: 'none'
						})
					}
				})
			},

			//滑动点击
			swipeClick(obj, id, index, name) {
				//删除合伙人
				console.log(obj);
				if (obj.content.id == "0") {
					this.deteleParter(id, index, name)
				} else {
					this.reviewInf(id, index)
				}
			},
			//删除合伙人
			deteleParter(id, index, name) {
				let thisObj = this;
				uni.showModal({
					title: '删除成员',
					content: '确定要删除成员' + '"' + name + '"' + '?',
					showCancel: true,
					cancelText: "取消",
					confirmText: "确定",
					success: function(res) {
						if (res.cancel) {
							//点击取消,默认隐藏弹框
						} else {
							thisObj.$api.deletePar(id).then(res => {
								if (res.data.code == "200") {
									uni.showToast({
										title: res.data.message,
										icon: 'none'
									})
									const removeItem = (item, i) => item.slice(0, i).concat(item.slice(i + 1, item.length));
									thisObj.data = removeItem(thisObj.data, index);
								}
							})
						}
					}
				})
			},
			//查看合伙人
			reviewInf(id) {
				this.$api.getParInfor(id).then(res => {
					let resData = res.data.data
					this.addtellData = resData
					console.log(this.addtellData);
					this.showPop = true
				})
			},
			closePop() {
				this.showPop = false
				this.addtellData = {}
			},
			//拨打电话
			makePhoneCall(phone) {
				if (phone) {
					uni.makePhoneCall({
						// 手机号
						phoneNumber: phone,
						// 成功回调
						success: (res) => {
							console.log('调用成功!')
						},
						// 失败回调
						fail: (res) => {
							console.log('调用失败!')
						}
					});
				}
			},
			//选择时间
			getDateTime(e) {
				this.time = e.target.value
				this.indexList(this.time)
			},
			//弹出框取消操作
			modalCancel: function() {
				this.addtellThree.addtellHidden = false;
			},
			// 状态判断
			status: function() {
				let that = this
				let status = this.userInfo.empClass;
				let isJoinTeam = this.userInfo.isJoinTeam;
				let teamPartnerStatus = this.userInfo.teamPartnerStatus;
				if (status == 0) {
					that.getList() //内部员工
				} else {
					that.indexList(this.time) //非内部员工
				}
				if (teamPartnerStatus == 1 && !isJoinTeam) {
					//合伙人		      
					this.showStatus = 1;
				}
				if (teamPartnerStatus == 0 && isJoinTeam) {
					//合伙人下的经纪人
					this.showStatus = 2
					this.$api.getParName(isJoinTeam).then(res => {
						this.name = res.data.data
					})
				}
				if ((teamPartnerStatus == 0 || !teamPartnerStatus) && !isJoinTeam) {
					//独立经纪人
					this.showStatus = 3
				}
			},
			//获取二维码
			getList() {
				this.$api.getParRWM().then(res => {
					this.url = res.data.data;
				})
			},
			// 用户状态数据
			indexList: function(time) {
				this.$api.getParData(time).then(res => {
					let resData = res.data.data;
					if (resData) {
						this.indexData = resData;
						this.teamAchievement = resData.teamAchievement;
						this.agentBonusAmount = resData.agentBonusAmount;
						if (resData.bonusScale = "null") {
							this.indexData.sectionStatus = ""
						}
					}
					if (resData == null) {
						this.indexData = []
						this.teamAchievement = []
					}
					if (resData && resData.teamAchievement.length > 0) {
						this.teamAchievement.forEach((item) => {
							item.right = 0
						})
						this.teamAchievementTitle = "团队成员"
						this.data = this.teamAchievement
					} else {
						this.teamAchievementTitle = "当月暂无团队成员"
					}
				}).catch(err => {
					console.log(err)
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f8f8f8;
	}

	.canvas_wrap {
		width: 100%;
		height: calc(100vh - var(--window-top) - var(--window-bottom));
		background: #3b9df8;
		overflow: hidden;

		.bg {
			width: 100%;
			height: 50%;
		}

		.con {
			width: 90%;
			height: 50%;
			background-color: white;
			border-radius: 15px;
			margin: -5% 5% 0;
			padding-top: 40rpx;
			padding-bottom: 60rpx;
			display: flex;
			flex-flow: column;
			z-index: 2;
			position: relative;
			justify-content: space-around;
		}

		.codeImg {
			width: 320rpx;
			height: 320rpx;
			display: flex;
			justify-content: center;
			margin: 0 auto;
		}

		.code {
			width: 100%;
			height: 100%;
		}

		.text {
			width: 100%;
			text-align: center;
			font-size: 14px;
			color: #333333;
			margin: 10rpx 0;
		}

		.btn {
			width: 100%;
		}

		.btnText {
			width: 74%;
			margin: 0 13%;
			background-color: #52AAF8;
			color: white;
			font-size: 18px;
			text-align: center;
			border-radius: 25px;
			height: 90rpx;
			line-height: 90rpx;
		}

		.share {
			width: 100%;
			height: 100vh;
		}
	}

	.hhr {
		.hhrImg {
			width: 100%;
			height: 340rpx;
		}

		.hhrTitle {
			width: 100%;
			font-size: 15px;
			position: relative;
			margin-top: -48rpx;
			margin-bottom: 20rpx;
		}

		.hhtText {
			width: 80%;
			margin: 0 10%;
			background-color: white;
			border-radius: 25px;
			line-height: 76rpx;
			text-align: center;
		}
	}

	.conditions {
		width: 90%;
		margin: 0 5%;
		padding: 30rpx;
		background-color: white;
		border-radius: 5px;
		.condTitle {
			font-size: 15px;
			font-weight: bold;
			color: #333333;
		}

		.condCenter {
			display: flex;
			justify-content: space-between;
			font-size: 13px;
			margin-top: 20rpx;
		}

		.left {
			width: 80%;
			color: #333333;
		}

		.right {
			width: 20%;
			text-align: center;
			color: #52AAF8;
			border: 1px #52AAF8 solid;
			padding: 5rpx;
			border-radius: 5px;
		}
	}

	.xiangqing {
		width: 90%;
		margin: 20rpx 5% 0 5%;
		background-color: white;
		border-radius: 5px;
		padding: 30rpx 0;

		.header {
			display: flex;
			justify-content: space-between;
		}

		.heaLeft {
			display: flex;
			flex-flow: column;
			width: 50%;
			text-align: center;
		}

		.heaRight {
			border-left: 1px #DCDCDC solid;
		}

		.heaTit {
			font-size: 20px;
			font-weight: bold;
			color: #333333;
		}

		.heaText {
			font-size: 13px;
			color: #999999;
			margin-top: 5rpx;
		}

		.heatishi {
			width: 94%;
			margin: 20rpx 3% 0 3%;
			line-height: 50rpx;
			background-color: rgb(225, 244, 255);
			color: #52AAF8;
			text-align: center;
			font-size: 13px;
			border-radius: 0 0 5px 5px;
		}

		.table {
			display: table;
			width: 94%;
			margin: 20rpx 3% 0 3%;
			border-collapse: collapse;
			box-sizing: border-box;
			background-color: #F8F8F8;
		}

		.table-tr {
			display: table-row;
			line-height: 60rpx;
		}

		.table-th {
			display: table-cell;
			text-align: center;
			vertical-align: middle;
			color: #333333;
			font-size: 13px;
		}

		.table-td {
			display: table-cell;
			text-align: center;
			vertical-align: middle;
			color: #333333;
			font-size: 13px;
		}

		.xqBtn {
			width: 100%;
			padding: 0 10%;
			margin-top: 35rpx;
		}

		.xqText {
			line-height: 76rpx;
			width: 100%;
			background-color: #CCCCCC;
			color: white;
			font-size: 16px;
			text-align: center;
			border-radius: 25px;
		}

		.xqhhrText {
			width: 100%;
			text-align: center;
			font-size: 11px;
			color: #999999;
			margin-top: 20rpx;
			line-height: 35rpx;
		}

		.places {
			display: flex;
			justify-content: space-between;
			padding: 0 5%;
		}

		.placesLeft {
			text-align: left;
			font-size: 15px;
			font-weight: bold;
			color: #333333;
		}

		.placesRight {
			font-size: 18px;
			font-weight: bold;
			text-align: right;
			color: #FF3347;
		}
	}

	.rules {
		width: 90%;
		margin: 20rpx 5% 0 5%;
		background-color: white;
		border: 1px #CCCCCC dashed;
		padding: 40rpx 20rpx;
		border-radius: 5px;

		.rulesTit {
			font-size: 14px;
			color: #333333;
			margin-bottom: 25rpx;
		}

		.rulesText {
			font-size: 12px;
			color: #999999;
		}
	}

	.user {
		width: 90%;
		margin: 40rpx 5%;

		.userTit {
			font-size: 16px;
			font-weight: bold;
			color: #333333;
		}

		.usercontent {
			display: flex;
			justify-content: space-between;
			background-color: white;
			padding: 20rpx 20rpx;
			border-radius: 5px;
			line-height: 50rpx;
			margin-top: 20rpx;
		}

		.userName {
			font-size: 15px;
			font-weight: bold;
			color: #333333;
		}

		.dengji {
			background-color: #52AAF8;
			color: white;
			border-radius: 25px;
			padding: 0 15rpx;
			font-size: 12px;
			width: 170rpx;
			text-align: center;
		}

		.dengjijjr {
			background-color: #FFA42F;
			color: white;
			border-radius: 25px;
			padding: 0 15rpx;
			font-size: 12px;
			width: 170rpx;
			text-align: center;
		}

		.places {
			display: flex;
			justify-content: space-between;
			padding: 0 5%;
		}

		.placesLeft {
			text-align: left;
			font-size: 15px;
			font-weight: bold;
			color: #333333;
		}

		.placesRight {
			font-size: 18px;
			font-weight: bold;
			text-align: right;
			color: #FF3347;
		}

		.hhrky {
			color: #00CCB2;
		}

		.ydc {
			background-color: #52AAF8;
			color: white;
		}

		.order-item {
			width: 100%;
			margin-top: 20rpx;
		}

		.usercontentremove {
			display: flex;
			flex: 1;
			justify-content: space-between;
			background-color: white;
			padding: 20rpx 20rpx;
			line-height: 50rpx;
			width: 100%;
		}
	}

	.buttonn {
		width: 100%;
		padding: 0 15%;
		margin: 20rpx 0 0 0;
		min-height: 0;
	}

	.buttonText {
		line-height: 76rpx;
		width: 100%;
		background-color: #52AAF8;
		color: white;
		font-size: 16px;
		text-align: center;
		border-radius: 25px;
	}

	.buttonText::after {
		border: unset;
	}

	.buttonText[disabled] {
		background: #CCCCCC;
		color: #FFFFFF;
	}

	.buttonstyle {
		background-color: white;
		border: 1px #52AAF8 solid;
		color: #52AAF8;
	}

	.addtellBox {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;

		.addtellMian {
			width: 100%;
		}

		.addtellTitle {
			font-size: 18px;
			font-weight: bold;
			color: #333333;
			text-align: center;
			margin: 20rpx 0;
		}

		.tellsection {
			background-color: white;
			width: 80%;
			margin: 0 auto;
			border-radius: 10px;
			padding: 80rpx 66rpx;
		}

		.label {
			position: relative;
		}

		.guanbi {
			position: absolute;
			top: 20px;
		}

		.guanbiImg {
			text-align: center;
			margin-top: 30rpx;
		}

		.addtellContent {
			padding: 0 30rpx;
			width: 100%;
			background-color: #F8F8F8;
			color: #333333;
			font-size: 16px;
			margin: 20rpx 0;
			line-height: 80rpx;
			border-radius: 5px;
		}
	}
</style>
